// @charset "utf-8";
// $fontSize:75;
// html {
//   font-size: $fontSize;
// }
// 
// @function r($px) {
//   @return $px/$fontSize+rem;
// }
// 
// @mixin setPm($name, $val...) {
//   //当参数不固定的时候使用...是固定写法从 $val...算数量
//   $max: length($val); //4
//   $str: '';
//   @for $i from 1 through $max {
//       $value: nth($val, $i)/$fontSize;
//       $str:#{$str+$value}rem;
//       @if $i <$max {
//           $str:#{$str+" "};
//       }
//   }
//   #{$name}:$str;
// }
// 
@charset "utf-8";
$fontSize:20;
html {
    font-size: $fontSize;
}

@function r($px) {
    @return $px/2/$fontSize+rem;
}

@mixin setPm($name, $val...) {
    //当参数不固定的时候使用...是固定写法从 $val...算数量
    $max: length($val); //4
    $str: '';
    @for $i from 1 through $max {
        $value: nth($val, $i)/2/$fontSize;
        $str:#{$str+$value}rem;
        @if $i <$max {
            $str:#{$str+" "};
        }
    }
    #{$name}:$str;
}

* {
    margin: 0;
    padding: 0;
}

.ovw {
    overflow: hidden;
}

html,
body {
    height: 100%;
}

.allAcontainer {
    height: 100%;
    width: 100%;
    display: block;
    position: relative;
    top: 0;
    .page {
        width: 100%;
        height: 100%;
        //       position: fixed;
        //       display: none;
        transform: translateX(100%);
        div.btn {
            a {
                display: block;
                width: 100%;
                height: 100%;
                cursor: pointer;
            }
        }
    }
    .page.active {
        transform: translateX(0);
    }
    .page.remove {
        transform: translateX(100%);
    }
    //   第五页
    .pageFive {
        position: fixed;
        top: 0;
        background-color: #131313;
        img {
            display: block;
            width: 100%;
        }
        //       星星
        p.fiveStar {
            width: r(674);
            height: r(377);
            position: absolute;
            left: r(45);
            top: r(20);
            -webkit-animation-timing-function: ease-in-out;
            -webkit-animation-name: breathe;
            -webkit-animation-duration: 2700ms;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-direction: alternate;
            z-index: 2;
        }
        div.detailText {
            //                        margin-top: r(140);
            //margin-top: r(80);
            margin-top: r(102);
            position: relative;
            z-index: 2;
            //           display: none;
            p {
                text-align: center;
                height: r(42);
                margin: 0 auto;
                i {
                    font-size: r(31);
                    color: #fff;
                    float: left;
                    margin: 0 r(4);
                    line-height: r(42);
                    font-style: normal;
                }
                span {
                    float: left;
                    font-size: r(40);
                    color: #eece7d;
                    line-height: r(42);
                    text-align: center;
                }
            }
            p:nth-of-type(1) {
                //               width: r(596);
                b {
                    display: inline-block;
                    font-weight: normal;
                }
                //               span.hide {
                //                   height: r(50);
                //                   display: none;
                //               }
            }
            p:nth-of-type(2) {
                width: r(418);
                margin: r(12) auto;
            }
            p:nth-of-type(3) {
                width: r(172);
            }
        }
        //       div.detailText.big {
        //           margin-top: r(140)
        //       }
        div.totalMap {
            //       	width: 100%;
            position: relative;
            height: r(1049);
            background: url(../img/five_total_earth.png) no-repeat top center;
            background-size: cover;
            //           background-color: pink;
            top: r(-12);
            //           margin-top: r(-20);
            div.jiao {
                position: absolute;
                right: 0;
                bottom: 0;
                width: r(139);
                height: r(136);
                background: url(../img/jiao.png) no-repeat center;
                background-size: cover;
            }
            .btnList {
                width: r(708);
                height: r(362);
                position: absolute;
                left: 50%;
                margin-left: r(-354);
                bottom: r(25);
                .inner {
                    width: r(708);
                    height: r(306);
                    background: url(../img/five_boxBg.png) no-repeat top center;
                    background-size: cover;
                }
                p.text {
                    width: r(506);
                    height: r(122);
                    margin: r(54) auto 0;
                }
                p.btnClick {
                    //                   display: none;
                    width: r(510);
                    margin: 0 auto;
                    margin-top: r(35);
                    a {
                        display: block;
                        width: r(245);
                        height: r(68);
                        float: left;
                    }
                    a.save {
                        margin-left: r(20);
                    }
                }
                p.bottomLogo {
                    width: r(134);
                    height: r(40);
                    margin: 0 auto;
                    margin-top: r(16);
                }
                div.text {
                    margin-top: r(46);
                    p {
                        text-align: center;
                        font-size: r(26);
                        line-height: r(44);
                        color: #fff;
                    }
                    p:nth-of-type(1) {
                        color: #dcbe74;
                    }
                    p:nth-of-type(2) {
                        span {
                            color: #dcbe74;
                        }
                    }
                }
                div.btnBottom {
                    width: r(500);
                    margin: 0 auto;
                    margin-top: r(43);
                    p {
                        font-size: r(28);
                        color: #eece7d;
                        float: left;
                        line-height: r(32);
                        margin-top: r(68);
                    }
                    //               分享
                    dl {
                        display: block;
                        width: r(260);
                        margin: 0 auto;
                        float: right;
                        img {
                            display: block;
                            width: 100%;
                        }
                        dt {
                            width: r(150);
                            float: left;
                            font-size: r(24);
                            line-height: r(24);
                            color: #d9d6cb;
                            text-align: right;
                            margin-top: r(39);
                            span {
                                display: block;
                                line-height: r(32);
                            }
                            //                           margin: r(12) auto r(10);
                        }
                        dd {
                            float: right;
                            width: r(98);
                            height: r(98);
                            //                       height: r(19);
                            //                           margin-top: r(8);
                        }
                    }
                }
            }
            .totalEarth {
                position: absolute;
                width: 100%;
                height: r(501);
                background: url(../img/five_total_map.png) no-repeat top left r(20);
                background-size: r(709) r(501);
                left: 0;
                top: r(127);
                .earthInner {
                    position: relative;
                    top: 0;
                    width: 100%;
                    height: r(501);
                    //                   background: pink;
                    div.pointList {
                        span {
                            width: r(42);
                            height: r(42);
                            background: url(../img/five_point.png) no-repeat center;
                            background-size: cover;
                            position: absolute;
                            display: none;
                        }
                        span.active {
                            display: block;
                        }
                        //                   	亚洲
                        .country0 {
                            right: r(144);
                            top: r(170);
                        }
                        .country1 {
                            right: r(176);
                            top: r(130);
                        }
                        .country2 {
                            right: r(105);
                            top: r(144);
                        }
                        .country3 {
                            right: r(99);
                            top: r(156);
                        }
                        .country4 {
                            right: r(75);
                            top: r(160);
                        }
                        .country5 {
                            right: r(109);
                            top: r(242);
                        }
                        .country6 {
                            right: r(120);
                            top: r(238);
                        }
                        .country7 {
                            right: r(134);
                            top: r(234);
                        }
                        .country8 {
                            right: r(138);
                            top: r(224);
                        }
                        .country9 {
                            right: r(158);
                            top: r(210);
                        }
                        .country10 {
                            right: r(150);
                            top: r(220);
                        }
                        .country11 {
                            right: r(139);
                            top: r(270);
                        }
                        .country12 {
                            right: r(130);
                            top: r(254);
                        }
                        .country13 {
                            right: r(125);
                            top: r(290);
                        }
                        .country14 {
                            right: r(112);
                            top: r(274);
                        }
                        .country15 {
                            right: r(205);
                            top: r(165);
                        }
                        .country16 {
                            right: r(190);
                            top: r(170);
                        }
                        .country17 {
                            right: r(196);
                            top: r(198);
                        }
                        .country18 {
                            right: r(222);
                            top: r(170);
                        }
                        .country19 {
                            right: r(185);
                            top: r(241);
                        }
                        .country20 {
                            right: r(196);
                            top: r(250);
                        }
                        .country21 {
                            right: r(224);
                            top: r(131);
                        }
                        .country22 {
                            right: r(216);
                            top: r(141);
                        }
                        .country23 {
                            right: r(232);
                            top: r(142);
                        }
                        .country24 {
                            right: r(240);
                            top: r(134);
                        }
                        .country25 {
                            right: r(249);
                            top: r(151);
                        }
                        .country26 {
                            right: r(253);
                            top: r(142);
                        }
                        .country27 {
                            right: r(266);
                            top: r(145);
                        }
                        .country28 {
                            right: r(265);
                            top: r(137);
                        }
                        .country29 {
                            right: r(274);
                            top: r(140);
                        }
                        .country30 {
                            right: r(290);
                            top: r(128);
                        }
                        // 欧洲
                        .country31 {
                            right: r(315);
                            top: r(47);
                        }
                        .country32 {
                            right: r(339);
                            top: r(57);
                        }
                        .country33 {
                            right: r(355);
                            top: r(57);
                        }
                        .country34 {
                            right: r(403);
                            top: r(48);
                        }
                        .country35 {
                            right: r(354);
                            top: r(77);
                        }
                        .country36 {
                            right: r(194);
                            top: r(68);
                        }
                        .country37 {
                            right: r(318);
                            top: r(106);
                        }
                        .country38 {
                            right: r(332);
                            top: r(92);
                        }
                        .country39 {
                            right: r(316);
                            top: r(102);
                        }
                        .country40 {
                            right: r(332);
                            top: r(107);
                        }
                        .country41 {
                            right: r(328);
                            top: r(101);
                        }
                        .country42 {
                            right: r(347);
                            top: r(91);
                        }
                        .country43 {
                            right: r(342);
                            top: r(97);
                        }
                        .country44 {
                            right: r(338);
                            top: r(103);
                        }
                        .country45 {
                            right: r(373);
                            top: r(85);
                        }
                        .country46 {
                            right: r(389);
                            top: r(85);
                        }
                        .country47 {
                            right: r(362);
                            top: r(89);
                        }
                        .country48 {
                            right: r(360);
                            top: r(94);
                        }
                        .country49 {
                            right: r(358);
                            top: r(94);
                        }
                        .country50 {
                            right: r(364);
                            top: r(113);
                        }
                        .country51 {
                            right: r(359);
                            top: r(123);
                        }
                        .country52 {
                            right: r(309);
                            top: r(113);
                        }
                        .country53 {
                            right: r(313);
                            top: r(113);
                        }
                        .country54 {
                            right: r(317);
                            top: r(115);
                        }
                        .country55 {
                            right: r(327);
                            top: r(118);
                        }
                        .country56 {
                            right: r(322);
                            top: r(134);
                        }
                        .country57 {
                            right: r(333);
                            top: r(112);
                        }
                        .country58 {
                            right: r(328);
                            top: r(112);
                        }
                        .country59 {
                            right: r(336);
                            top: r(126);
                        }
                        .country60 {
                            right: r(379);
                            top: r(127);
                        }
                        .country61 {
                            right: r(386);
                            top: r(135);
                        }
                        //                       北美洲
                        .country62 {
                            left: r(127);
                            top: r(103);
                        }
                        .country63 {
                            left: r(133);
                            top: r(146);
                        }
                        .country64 {
                            left: r(117);
                            top: r(208);
                        }
                        .country65 {
                            left: r(245);
                            top: r(9);
                        }
                        .country66 {
                            left: r(146);
                            top: r(232);
                        }
                        .country67 {
                            left: r(156);
                            top: r(229);
                        }
                        .country68 {
                            left: r(151);
                            top: r(243);
                        }
                        .country69 {
                            left: r(153);
                            top: r(237);
                        }
                        .country70 {
                            left: r(150);
                            top: r(237);
                        }
                        .country71 {
                            left: r(154);
                            top: r(244);
                        }
                        .country72 {
                            left: r(156);
                            top: r(247);
                        }
                        .country73 {
                            left: r(192);
                            top: r(206);
                        }
                        .country74 {
                            left: r(175);
                            top: r(211);
                        }
                        .country75 {
                            left: r(176);
                            top: r(221);
                        }
                        .country76 {
                            left: r(184);
                            top: r(215);
                        }
                        .country77 {
                            left: r(206);
                            top: r(243);
                        }
                        .country78 {
                            left: r(198);
                            top: r(217);
                        }
                        .country79 {
                            left: r(201);
                            top: r(220);
                        }
                        .country80 {
                            left: r(203);
                            top: r(225);
                        }
                        //                       南美洲
                        .country81 {
                            left: r(182);
                            top: r(270);
                        }
                        .country82 {
                            left: r(195);
                            top: r(253);
                        }
                        .country83 {
                            left: r(220);
                            top: r(265);
                        }
                        .country84 {
                            left: r(163);
                            top: r(279);
                        }
                        .country85 {
                            left: r(165);
                            bottom: r(145);
                        }
                        .country86 {
                            left: r(197);
                            bottom: r(137);
                        }
                        .country87 {
                            left: r(218);
                            bottom: r(161);
                        }
                        .country88 {
                            left: r(183);
                            bottom: r(89);
                        }
                        .country89 {
                            left: r(199);
                            bottom: r(58);
                        }
                        .country90 {
                            left: r(219);
                            bottom: r(69);
                        }
                        .country91 {
                            left: r(211);
                            bottom: r(83);
                        }
                        //                       北美洲
                        .country92 {
                            right: r(71);
                            bottom: r(133);
                        }
                        .country93 {
                            right: r(12);
                            bottom: r(75);
                        }
                        .country94 {
                            right: r(81);
                            bottom: r(237);
                        }
                        .country95 {
                            right: r(70);
                            bottom: r(244);
                        }
                        .country96 {
                            right: r(47);
                            bottom: r(194);
                        }
                        .country97 {
                            right: r(29);
                            bottom: r(185);
                        }
                        .country98 {
                            right: r(16);
                            bottom: r(185);
                        }
                        .country99 {
                            right: r(23);
                            bottom: r(179);
                        }
                        .country100 {
                            right: r(14);
                            bottom: r(202);
                        }
                        .country101 {
                            right: r(13);
                            bottom: r(214);
                        }
                        .country102 {
                            right: r(11);
                            bottom: r(207);
                        }
                        //                         非洲
                        .country103 {
                            right: r(302);
                            bottom: r(297);
                        }
                        .country104 {
                            right: r(331);
                            bottom: r(293);
                        }
                        .country105 {
                            right: r(345);
                            bottom: r(321);
                        }
                        .country106 {
                            right: r(382);
                            bottom: r(309);
                        }
                        .country107 {
                            right: r(294);
                            bottom: r(264);
                        }
                        .country108 {
                            right: r(265);
                            bottom: r(223);
                        }
                        .country109 {
                            right: r(278);
                            bottom: r(191);
                        }
                        .country110 {
                            right: r(281);
                            bottom: r(156);
                        }
                        .country111 {
                            left: r(309);
                            bottom: r(246);
                        }
                        .country112 {
                            left: r(308);
                            bottom: r(239);
                        }
                        .country113 {
                            left: r(319);
                            bottom: r(230);
                        }
                        .country114 {
                            left: r(319);
                            bottom: r(221);
                        }
                        .country115 {
                            left: r(328);
                            bottom: r(217);
                        }
                        .country116 {
                            left: r(335);
                            bottom: r(223);
                        }
                        .country117 {
                            left: r(360);
                            bottom: r(221);
                        }
                        .country118 {
                            left: r(409);
                            bottom: r(143);
                        }
                        .country119 {
                            left: r(387);
                            bottom: r(148);
                        }
                        .country120 {
                            right: r(261);
                            bottom: r(123);
                        }
                        .country121 {
                            right: r(230);
                            bottom: r(130);
                        }
                    }
                }
            }
        }
    }
    .pageFive.small {
        div.detailText {
            position: absolute;
            z-index: 2;
            margin-top: 0;
            width: r(596);
            left: 50%;
            margin-left: r(-298);
            top: r(24);
        }
    }
    .pageFive {
        div.detailText.martop {
            margin-top: r(30);
            margin-bottom: r(30);
        }
    }
}

@media (max-width: 321px) {
    .allAcontainer {
        .pageFive {
            div.detailText {
                p:nth-of-type(1) {
                    width: r(610);
                }
            }
        }
    }
}